<script setup lang="ts">
import getDiscussions from '@/api/getDiscussions';
import getNotices from '@/api/getNotices';
import getUser from '@/api/getUser';
import getMyEnrollNotice from '@/api/getMyEnrollNotice';

import { computed, onMounted, provide, ref } from 'vue';
import { useRouter } from 'vue-router';
import type { Discussion, Notice } from '@/types/types';
import { userinfo } from '@/stores/counter';

const user = userinfo();
const router = useRouter();

const { getName } = getUser();
const { getDiscussionList } = getDiscussions();
const { setNotices } = getNotices();
const { gettingMyEnrollNotice } = getMyEnrollNotice();

const hotDiscussions = ref([] as Discussion[]);
const notices = ref([] as Notice[]);

const isDiscussionDetailShowed = ref(false);
const currentDiscussionData = ref({} as Discussion);

const isNoticeDetailShowed = ref(false);
const currentNoticeData = ref({} as Notice);

const shouldLoading = ref(true);
const shouldLoading2 = ref(true);

onMounted(async () => {
  shouldLoading.value = true;
  shouldLoading2.value = true;
  // 非常抽象的写法
  // discussion 是通用接口
  if (user.hotDisscussions.length != 0) {
    hotDiscussions.value = user.hotDisscussions;
  }
  else {
    hotDiscussions.value = await getDiscussionList(1, 10, 1);
    // 遍历 hotDiscussions，加上 nickName
    for (let i = 0; i < hotDiscussions.value.length; i++) {
      hotDiscussions.value[i].nickName = await getName(hotDiscussions.value[i].userId);
    }
    user.hotDisscussions = hotDiscussions.value;
  }
  shouldLoading.value = false;
  // notice 是独立的
  if (user.notices.length == 0) {
    await setNotices();
  }
  notices.value = user.notices;
  if (!user.enrolledNotices) {
    await gettingMyEnrollNotice()
  }
  shouldLoading2.value = false;
});

const showDiscussionDetail = (index: number) => {
  router.push("/discate/" + hotDiscussions.value[index].discussionCateId)
};

const showNoticeDetail = (index: number) => {
  currentNoticeData.value = notices.value[index];
  isNoticeDetailShowed.value = true;
};

const parseYearTime = (time: number) => {
  const date = new Date(time * 1000);
  return `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`;
};

const cutTo = (str: string, len: number = 30) => {
  if (str.length > len) {
    return str.slice(0, len) + '...';
  }
  return str;
};

const updateNotice = () => {
  notices.value = user.notices;
}

provide('updateNotice', updateNotice);
</script>

<template>
  <div class="card1">
    <el-dialog v-model="isDiscussionDetailShowed" :title="currentDiscussionData.topic" width="50%" :html="true"
      align-center class="card-dialog">
      {{ currentDiscussionData.content }}
    </el-dialog>
    <el-dialog v-model="isNoticeDetailShowed" :title="currentNoticeData.title" width="50%" :html="true" align-center
      class="card-dialog">
      <NoticeCard :data="currentNoticeData" :key="currentNoticeData.id" />
    </el-dialog>
    <!-- <div class="topic" v-loading="shouldLoading">
      <div class="topic-title unselectable">
        热门议题：
        <div class="topic-titlebg"></div>
      </div>
      <div class="empty-place" v-if="hotDiscussions.length == 0">
        暂无热门议题
      </div>
      <div v-for="(discussion, index) in hotDiscussions" class="topic-text" @click="showDiscussionDetail(index)">
        <span class="topic-author">
          {{ discussion.nickName }}:
        </span>
        {{ cutTo(discussion.content) }}
      </div>
    </div> -->
    <div class="post" v-loading="shouldLoading2">
      <div class="post-title unselectable">
        圆桌招募公告：
        <div class="post-titlebg"></div>
      </div>
      <div class="empty-place" v-if="notices.length == 0">
        暂无招募公告
      </div>
      <div v-for="(notice, index) in notices" class="post-row">
        <div :class="[notice.status ? '' : 'banned-post', 'post-text']" @click="showNoticeDetail(index)">{{ notice.title }}
          (<span class="post-cur">{{ notice.curPeople }}</span><span class="post-gang">/</span><span class="post-total">{{
            notice.maxPeople }}</span>)
        </div>
        <div class="limit-time"> {{ parseYearTime(notice.createAt) }}</div>
      </div>
    </div>
  </div>
</template>

<style>
.topic-author {
  color: #f5900a;
  font-weight: 600;
}

.post-row {
  margin: 10px 0 0 20px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}

.card1 {
  width: 100%;
  /* background-color: rebeccapurple; */
  border-radius: 5px;
  border: 3px solid #f5900a;
}

.card-dialog {
  .el-dialog__header {
    margin: 0;
    padding: 40px 40px 0 40px;
  }

  .el-dialog__body {
    padding: 10px 40px 40px 40px;
  }

  .el-dialog__title {
    font-size: 20px;
    color: #fa7c0a;
    font-weight: 500;
  }
}

.topic,
.post {
  margin: 10px 20px;
}

.post-cur {
  color: #f5900a;
}

.post-full {
  color: #000000 !important;
}

.topic-text {
  position: relative;
  margin: 10px 0 0 20px;
  color: #000000;
  font-size: 16px;
  font-weight: 400;
  cursor: pointer;
}

.topic-text:hover,
.post-text:hover {
  color: #f5900a;
}

.post-text {
  position: relative;
  font-size: 16px;
  font-weight: 400;
  cursor: pointer;
}

.limit-time {
  flex-shrink: 0;
  font-size: 14px;
  margin-left: 20px;
  color: #b1b0b0;
}

.topic-text::before,
.post-text::before {
  content: "";
  display: inline-block;
  border-radius: 100%;
  height: 6px;
  width: 6px;
  position: absolute;
  top: 40%;
  left: -15px;
}

.topic-text::before {
  background-color: #f5900a;
}

.post-text::before {
  background-color: #f5900a;
}

.topic-title,
.post-title {
  font-size: 18px;
  font-weight: 600;
  position: relative;
  margin: 20px 0;
}

.topic-titlebg,
.post-titlebg {
  height: 16px;
  background: linear-gradient(to right, #f59009, 20%, #ffffff 70%);
  position: absolute;
  bottom: -4px;
  z-index: -1;
}

.topic-titlebg {
  width: 85px;
}

.post-titlebg {
  width: 120px;
}

.notice-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
}

.notice-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  /* margin: 10px 0; */
}

.notice-holdtime-title {
  font-size: 16px;
  font-weight: 500;
  color: #000000;
}

.notice-holdtime-content {
  font-size: 16px;
  font-weight: 400;
  color: #000000;
  margin-left: 10px;
}

.notice-content {
  font-size: 16px;
  font-weight: 400;
  color: #000000;
  white-space: pre-wrap;
}

.empty-place {
  min-height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #b1b0b0;
}

/* .banned-post {
  color: grey;
} */
</style>
